{% extends 'globalPage.html' %}
{% load filter %}
<title>{% block title %}云学习平台{% endblock %}</title>
{% block body %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" style="padding: 0;" href="{% url 'home' %}"><img style="height: 50px;"
                                                                                         src="/static/image/logo.png"
                                                                                         alt="Band"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'home' %}">首页</a></li>
                    <li class="active"><a href="{% url 'courses' 'firstGrade' 'allCourses' 1 %}">课程</a></li>
                </ul>
                <form class="navbar-form navbar-left" action="{% url 'search' %}" method="get">
                    <div class="form-group">
                        <input type="text" class="form-control" value="{{ searchContent }}" name="searchContent" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">🔍</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    {% if user.is_authenticated %}
                        <li><a href="javascript:;" style="margin-top: 5px">你好，{{ user.first_name }}</a></li>
                        <li class="dropdown">
                            <a id="dLabel" data-target="#" href="javascript:;" data-toggle="dropdown"
                               role="button" aria-haspopup="true" aria-expanded="false">
                                <img class="img-circle" src="/static/image/Head.jpg" alt="head"
                                     style="height: 30px;">
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="{% url 'personalCenter' %}" style="text-align: center">个人中心</a></li>
                                <li><a href="{% url 'history' %}" style="text-align: center">播放历史</a></li>
                                <li><a href="{% url 'logout' %}" style="text-align: center">退出登陆</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="{% url 'login' %}">登陆/注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="row grade_content">
        <div class="container">
            {% for grade in grades %}
                <a class="col-md-1 grades"
                   href="{% url 'courses' grade.gradeurl 'allCourses' 1 %}">{{ grade.gradename }}</a>
            {% endfor %}
        </div>
    </div>
    <div class="container" style="min-height: 550px; margin-top: 30px">
        {% if searchCoursesId %}
            {% for searchCourseId in searchCoursesId %}
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a href="{% url 'videoPlayer' searchCourseId|getCourseUrl searchCourseId searchCourseId|getCourseVideoId %}"
                           target="_blank"><img
                                src="{{ searchCourseId|getCourseImgUrl }}"></a>
                        <div class="caption">
                            <a style="text-decoration: none;"
                               href="{% url 'videoPlayer' searchCourseId|getCourseUrl searchCourseId searchCourseId|getCourseVideoId%}"
                               target="_blank"><h3>{{ searchCourseId|getCourseVideoName }}</h3></a>
                            <p>{{ searchCourseId|getCourseName }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div style="width: 100%; height: 400px;display: flex;
			align-items: center;
			justify-content: center;">
            <img style="height: 200px;" src="/static/image/logo.png">
            <div class="alert alert-info" role="alert">
                没找到与<span style="color: red; font-weight: bold;cursor: pointer;">{{ searchContent }}</span>相关的内容，换个姿势再搜一下^_^
            </div>
        </div>
        {% endif %}
    </div>
{% endblock %}